<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        /*  flexbox演示站：https://xluos.github.io/demo/flexbox/   */
      .flex_container {
        height: 600px;
        display: flex;
        /* flex-direction: row;
        flex-wrap: wrap-reverse; */
        flex-flow: row wrap; /*主轴方向    如果一条轴线排不下，是否换行*/
        justify-content: space-around; /* 主轴（水平轴）的排列方式*/
        align-items: stretch; /*交叉轴上的排列方式  --一根主轴线*/
        align-content: flex-start; /*交叉轴上的排列方式 --多根主轴线*/
      }
      .flex_item {
        order: 0;
        /* flex-grow: 1;
        flex-shrink: 0;
        flex-basis: auto; */
        flex: 0 1 auto; /*放大比例  缩小比例  分配剩余空间之前，项目占据的主轴空间*/
      }
      .flex_item.item1 {
        min-width: 100px;
        order: 3; /*定义项目的排列顺序*/
        align-self: center; /*允许单个项目有与其他项目不一样的对其方式，可覆盖align-item属性*/
      }
    </style>
    <script src="./less.min.js"></script>
  </head>
  <body>
    <div class="flex_container">
      <div class="flex_item item1">item1</div>
      <div class="flex_item">item2</div>
      <div class="flex_item">item3</div>
      <div class="flex_item">item4</div>
      <div class="flex_item">item5</div>
      <div class="flex_item">item6</div>
      <div class="flex_item">item7</div>
      <div class="flex_item">item8</div>
      <div class="flex_item">item9</div>
      <div class="flex_item">item10</div>
      <div class="flex_item">item11</div>
      <div class="flex_item">item12</div>
    </div>
  </body>
</html>
